<template>
  <div
    :class="['box-wrapper', `${className}-box-wrapper`]"
    :style="{backgroundColor:backgroundColor}"
  >
    <div class="box-header" :style="{ paddingLeft: headerPadding +'rpx'}">
      <slot name="header-left">
        <div class="box-title" v-if="title">{{ title }}</div>
      </slot>
      <slot name="header-right"> </slot>
      <slot name="header-center"> </slot>
    </div>
    <div class="box-body" >
      <slot></slot>
    </div>
    <div class="box-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script setup>
import {defineEmits} from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  className: {
    type: String,
    default: "clean",
  },
  headerPadding: {
    type: [String, Number],
    default: "0",
  },
  backgroundColor:{
    type:String
  }
});
const emit = defineEmits(["on-click"]);
// const onVerticalClick = (e) => {
//   emit("on-click", { id: e });
// };
</script>
<style lang="less" scoped>
.box-wrapper {
  // position: relative;
  padding:10rpx 22rpx;
  &.clean-box-wrapper {
    background-color: transparent;
  }
  &.light-box-wrapper {
    background-color: @color-font;
  }
  &.nav-box-wrapper{
    padding-bottom: 50px;
  }
  &.screen-box-wrapper{
    margin-top: 40px;
  }
  .box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .box-title {
      padding-bottom:30rpx;
      font-size: @font-size-31;
      font-family: "ali-m";
      font-weight: bold;
      color: @color-black;
    }
  }
  .box-body {
  }
  .box-footer {
  }
}
</style>
